<template>
  <div class="category-contain">
    <div style="display: flex; margin: 10px;">
      <el-button size="small" type="primary" @click="dialogFormVisible = true">添加类型</el-button>
      <el-input style="width: 250px;margin-left: 50px;" size="small" placeholder="请输入类型" prefix-icon="el-icon-search"
        v-model="category.category_name" clearable @clear="getcategoryList">
        <el-button size="small" slot="append" icon="el-icon-search" @click="getcategoryList"></el-button>
      </el-input>
    </div>
    <div class="table-container">
      <el-table :data="categoryList">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="category_name" label="类型" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleDelete(scope.row)" type="text" size="large">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="category.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="category.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <div class="dialog-container">
      <el-dialog title="新增类型" width="300px" :visible="dialogFormVisible" :show-close="false">
        <el-form :rules="rules" ref="form" label-width="55px" :model="form">
          <el-form-item label="类型" prop="categoryName">
            <el-input style="width: 150px;" clearable size="small" v-model="form.categoryName"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="cancel">取 消</el-button>
          <el-button size="small" type="primary" @click="addCategory">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { deleteCategoryAPI, addCategoryAPI } from '@/api/article'
import { getCategoryDetailAPI } from '@/api/public'
export default {
  data() {
    return {
      form: {
        categoryName: ''
      },
      dialogFormVisible: false,
      id: '',
      category: {
        pageNum: 1,
        pageSize: 5,
        category_name: '',
      },
      total: 0,
      categoryList: [],
      rules: {
        categoryName: [
          { required: true, message: '请输入类型', trigger: 'blur' }
        ]
      },
    }
  },
  mounted() {
    this.getcategoryList()
  },
  methods: {
    addCategory() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm("你确定添加吗？").then(async () => {
            const res = await addCategoryAPI(this.form)
            if (res.code == 200) {
              this.$message.success("添加成功")
            } else {
              this.$message.error(res.msg)
            }
            this.getcategoryList()
            this.cancel()
          })

        }
      })

    },
    cancel() {
      this.form.categoryName = ''
      this.dialogFormVisible = false
      this.$refs.form.clearValidate();
    },
    async getcategoryList() {
      const res = await getCategoryDetailAPI(this.category)
      if (res.code == 200) {
        this.categoryList = res.data.rows
        this.total = res.data.total
      }
    },
    handleDelete(row) {
      this.id = row.id
      this.DeleteCategory()
    },
    DeleteCategory() {
      this.$confirm("你确定要删除吗？").then(async () => {
        const res = await deleteCategoryAPI(this.id)
        console.log(res)
        if (res.code == 200) {
          this.$message.success("删除成功")
        } else {
          this.$message.error(res.msg)
        }
        this.getcategoryList()
      }).catch(() => {
        this.$message.info("已取消")
      })
    },
    handleSizeChange(val) {
      this.category.pageSize = val
      this.getcategoryList()
    },
    handleCurrentChange(val) {
      this.category.pageNum = val
      this.getcategoryList()
    },
  }
}
</script>

<style>
.category-contain {
  width: 50%;
  border: 2px solid rgb(224, 219, 219);
  margin: 20px;
}

.block {
  text-align: right;
  padding: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: center
}
</style>
